<template>
	<view class="assistance-box">
		<u-navbar title="国之助力" bgColor="#fff">
			<view class="u-nav-slot" slot="left">

			</view>

		</u-navbar>
		<view class="accistance-content">
			<view class="top-picture" @tap="invite()">
				<image :src="$wanlshop.oss('/uploads/20231021/BANNER.png')" mode="widthFix"></image>
				<button class="picture-b">立即查看</button>
			</view>
			<view class="total-limit">
				<view class="limit-top">
					<image :src="$wanlshop.oss('/uploads/20231021/limit.png')" mode="widthFix"></image>
					<span class="all-money">我的总额(元)</span>
				</view>
				<view class="limit-middle">
					<span class="money-number">{{ limit }}</span>
					<button class="limit-middle-but" @tap="recharge()">充值</button>
				</view>
				<view class="limit-bottom">
					<view class="income" @tap="myReinvestment">
						<view class="income-left">
							<span class="income-text">再投资金(元)</span>
							<span class="income-money">{{ fund || '0.00'}}</span>
						</view>
						<image :src="$wanlshop.oss('/uploads/20231021/more.png')" mode="widthFix"
							style="width: 12rpx;height: auto;"></image>
					</view>
					<view class="line">

					</view>
					<view class="income" @tap="myIncome">
						<view class="income-left">
							<span class="income-text">我的收益(元)</span>
							<span class="income-money">{{ income || '0.00' }}</span>
						</view>
						<image :src="$wanlshop.oss('/uploads/20231021/more.png')" mode="widthFix"
							style="width: 12rpx;height: auto;"></image>
					</view>
				</view>
			</view>
			<view class="type">
				<!-- <view class="type-box" @tap="streaming">
					<image :src="$wanlshop.oss('/uploads/20231021/plug-flow.png'        )" mode="widthFix"
						style="width: 48rpx;height: auto;"></image>
					<view class="type-text">
						推流数据
					</view>
				</view> -->
				<view class="type-box" @tap="recommend">
					<image :src="$wanlshop.oss('/uploads/20231023/tjren.png'       )" mode="widthFix"
						style="width: 54rpx;height: auto;"></image>
					<view class="type-text">
						推荐
					</view>
				</view>
				<view class="type-box" @tap="myIncome">
					<image :src="$wanlshop.oss('/uploads/20231021/history.png'       )" mode="widthFix"
						style="width: 48rpx;height: auto;"></image>
					<view class="type-text">
						历史记录
					</view>
				</view>
				
				<view class="type-box" @tap="withdrawal">
					<image :src="$wanlshop.oss('/uploads/20231021/withdrawal.png')" mode="widthFix"
						style="width: 48rpx;height: auto;"></image>
					<view class="type-text">
						提现
					</view>
				</view>
			</view>
			<view class="selection">
				<view class="selection-title">
					<view class="left">
						<span class="text pin">选品</span>
						<span class="text">投流费</span>
					</view>
					<span class="text">预计收益</span>
				</view>
				<view class="selection-list" v-for="item in data" :key="item.id" @tap="toShop(item.id)">
					<view class="left">
						<image :src="$wanlshop.oss(item.image)" mode="widthFix" style="width: 96rpx;height: 96rpx;"></image>
						<span class="inflow">{{ item.investment_cost||0.00 }}</span>
					</view>
					<span class="money">{{ item.income||0.00 }}</span>
				</view>
				<!-- 底部提示 -->
				<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="lowerBottom" />
			</view>
		</view>
		<view v-if="isRecharge" class="preview-modal">
			<view v-if="isRecharge" class="modal-overlay" @click="closeRecharge"></view>
			<view class="preview-content">
				<view class="title">
					<image :src="$wanlshop.oss('/uploads/20231021/chongzhi.png')" mode="widthFix" style="width: 34rpx;">
					</image>
					<span class="chong">充值</span>
					<image :src="$wanlshop.oss('/uploads/20231021/chongzhi.png')" mode="widthFix" style="width: 34rpx;">
					</image>
				</view>
				<span class="money-text">充值金额</span>
				<view class="big-box">
					<view class="box-top">
						<view class="money" :class="{ 'money-select': selectedBox === 300 }" @tap="selectBoxed(300)">
							<view class="money-text-pupop">
								<span class="money-big" :class="{ 'money-color': selectedBox === 300 }">300</span>
								<span class="money-small" :class="{ 'money-color': selectedBox === 300 }">元</span>
							</view>

						</view>
						<view class="money" :class="{ 'money-select': selectedBox === 2000 }" @tap="selectBoxed(2000)">
							<view class="money-text-pupop">
								<span class="money-big" :class="{ 'money-color': selectedBox === 2000 }">2000</span>
								<span class="money-small" :class="{ 'money-color': selectedBox === 2000 }">元</span>
							</view>
						</view>
						<view class="money" :class="{ 'money-select': selectedBox === 5000 }" @tap="selectBoxed(5000)">
							<view class="money-text-pupop">
								<span class="money-big" :class="{ 'money-color': selectedBox === 5000 }">5000</span>
								<span class="money-small" :class="{ 'money-color': selectedBox === 5000 }">元</span>
							</view>
						</view>
					</view>
					<view class="box-middle">
						<input type="number" v-model="price" placeholder="请输入充值金额" style="height: 100%;font-size: 28rpx;
font-weight: 400;
color: #B1B1B1;
line-height: 40rpx;padding-left: 36rpx;">
					</view>
					<view class="box-bottom">
						<button class="determine">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isInvite" class="invite" @tap="closeInvite">
<!--			<view v-if="isInvite" class="modal-overlay" @click="closeInvite"></view>-->
<!--			<view class="invite-box">-->
<!--				<view class="content-box">-->
<!--					<view class="">-->
<!--						<image :src="$wanlshop.oss('/uploads/20231021/guanbi.png')" mode="widthFix"-->
<!--							style="width: 40rpx;opacity: 0.5; float: right;" @tap="closeInvite"></image>-->
<!--					</view>-->

<!--					<view class="title-box">-->
<!--						<view class="title">-->
<!--							邀请好友-->
<!--						</view>-->
<!--						<view class="subtitle">-->
<!--							优品有收益，助力国货发展-->
<!--						</view>-->
<!--						<image :src="qrCode" mode="widthFix"-->
<!--							style="width: 420rpx;background: #FFFFFF;border-radius: 16rpx;height: 420rpx;margin-bottom: 180rpx;">-->
<!--						</image>-->
<!--						<button class="saveFirend" @tap="saveFirend">保存图片分享给好友</button>-->
<!--						<span style="height: 40rpx;font-size: 28rpx;font-weight: 400;color: #FFBEBD;" @tap="invited">已邀请的好友</span>-->
<!--					</view>-->
<!--				</view>-->

<!--			</view>-->
      <canvas class="canvas" canvas-id="poster" @click.stop>
        <cover-view class="shareClose" @tap="closeInvite">关闭</cover-view>
        <cover-view class="shareButton" @tap="saveFirend">
          保存图片分享给好友
        </cover-view>
      </canvas>
		</view>
		
	</view>
</template>

<script>
  import { mapState } from 'vuex';
	export default {
		data() {
			return {
				qrCode: '',
				isInvite: false,
				limit: '0.00', //我的总额
				fund: 0, //再投资金
				income: 0, //我的收益
				price: '',
				data: [],
				isRecharge: false,
				selectedBox: 300,
				current_page:1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: '点击或上拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多商品了'
				},

        backgroundSrc:'https://cdn.enjoysix.com/uploads/20231021/yaoqinghaoyou.png',
        windowWidth:0,
        windowHeight:0,
			}
		},
    computed: {
      ...mapState(['user', 'statistics','common'])
    },
		mounted() {
			this.getShopData()
		},
    onLoad() {
      var self = this;
      if (this.$store.state.user.isLogin) {
        this.getMyData()
      }

      uni.getSystemInfo({
        success: function(res) {
          self.windowWidth =  res.windowWidth * 0.8;
          self.windowHeight = 718 / 448 * res.windowWidth * 0.8;
        },
      })
    },
		onReachBottom() {
			this.lowerBottom()
		},
		methods: {
			//上拉加载
			lowerBottom(){
				if (this.status == 'noMore') {
					return;
				}
				this.current_page++;
				this.status = "loading"
				this.getShopData();
			},
			//打开充值
			recharge() {
				// this.isRecharge = true
				uni.navigateTo({
					url:'/pages/user/money/recharge'
				})
			},
			//关闭充值
			closeRecharge() {
				this.isRecharge = false
			},
			//选择金额
			selectBoxed(index) {
				this.selectedBox = index
			},
			//打开邀请
			invite() {
        var self = this;
				this.isInvite = true

        var ctx = uni.createCanvasContext('poster', this);
        uni.getImageInfo({
          src: self.backgroundSrc,
          success: (res) => {
            self.width = res.width;
            self.height = res.height;
            ctx.save();
            ctx.drawImage(res.path, 0, 0, self.windowWidth, self.windowHeight);
            ctx.draw(true);

            // 文字
            ctx.setFillStyle("#FFFFFF");
            ctx.setFontSize(25)
            ctx.textAlign = "center";
            ctx.fillText('邀请好友',self.windowWidth * 0.5, self.windowHeight*0.20);
            ctx.draw(true);

            ctx.setFillStyle("#FFBEBD");
            ctx.setFontSize(16)
            ctx.textAlign = "center";
            ctx.fillText('优品有收益，助力国货发展',self.windowWidth * 0.5, self.windowHeight * 0.25);
            ctx.draw(true);

            var where = {
              path: 'pages/index',
              param: 'user_id=' + self.$store.state.user.id
            }
            uni.request({
              url: "/wanlshop/common/wx_qrcode",
              data: where,
              success: res => {
                if (!res.data){
                  self.$wanlshop.msg('二维码生成失败');return false;
                }
                self.posterSrc = res.data

                // 设置二维码图片宽高
                let QRCodeHeight;
                let QRCodeWidth = QRCodeHeight = self.windowWidth * 0.55;
                // let QRCodeHeight = QRCodeWidth;
                //计算二维码图片定位距离
                let QRCodeX = (self.windowWidth - QRCodeWidth) / 2;
                let QRCodeY = self.windowHeight * 0.30;
                ctx.save();

                // 小程序二维码
                const yq = wx.getFileSystemManager();//声明文件系统
                var times = new Date().getTime();//当前时间，防止与其他文件重复
                var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';//定义路径
                yq.writeFile({
                  filePath: codeimg,//要写的文件地址
                  data: self.posterSrc.slice(22),//内容来源,前缀必须是'data:image/png;base64,'
                  encoding: 'base64',//内容类型
                  success: () => {
                    ctx.drawImage(codeimg, QRCodeX, QRCodeY, QRCodeWidth, QRCodeHeight);
                    ctx.draw(true);
                  }
                });
              }
            })

          },
          fail: (res) => {
            console.log(res)
          }
        })
			},
			//关闭邀请
			closeInvite() {
				this.isInvite = false
        console.log("开始画图")
			},
			//保存邀请二维码
			saveFirend() {
        var self = this;
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: this.windowWidth,
          height: this.windowHeight,
          destWidth: this.windowWidth,
          destHeight: this.windowHeight,
          canvasId: 'poster',
          success: (res) => {
            // console.log("========================",res)
            // console.log("========================",res.tempFilePath)
            console.log(res.tempFilePath)
            this.saveimag(res.tempFilePath);
          },
          fail: (res) => {
            console.log(res)
          }
        });
			},
      saveimag: function(url) {
        var self = this;
        uni.showLoading({
          title: '保存中'
        });
        uni.getSetting({
          success: (res) => {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              uni.authorize({
                scope: "scope.writePhotosAlbum",
                success: (res) => {
                  uni.saveImageToPhotosAlbum({
                    filePath: url,
                    success: (res) => {
                      uni.hideLoading();
                      self.$wanlshop.msg("保存成功")
                    }
                  })
                },
                fail: () => {
                  uni.showModal({
                    title: "您已拒绝获取相册权限",
                    content: "是否进入权限管理,调整授权？",
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting({
                          success: (res) => {
                            res.authSetting
                          }
                        })
                      }
                    }
                  });
                }
              })
            } else {
              uni.saveImageToPhotosAlbum({
                filePath: url,
                success: (res) => {
                  uni.hideLoading();
                  self.$wanlshop.msg("保存成功")
                }
              })
            }
          }
        });
      },
			//已邀请的好友
			invited(){
				
			},
			//我的收益
			myIncome(){
				uni.navigateTo({
					url:'/assistance/income'
				})
			},
			//再投资金
			myReinvestment(){
				uni.navigateTo({
					url:'/assistance/reinvestment'
				})
			},
			//推荐
			recommend(){
				uni.navigateTo({
					url:'/assistance/recommend'
				})
			},
			//推流数据
			streaming(){
				uni.navigateTo({
					url:'/assistance/streaming'
				})
			},
			//跳转到商品详情
			toShop(id){
				uni.navigateTo({
					url:'/pages/product/detail?id='+id+'&assistancePrice=true'
				})
			},
			//跳转到提现
			withdrawal(){
				uni.navigateTo({
					url:'/pages/user/money/withdraw'
				})
			},
			//获取我的数据
			async getMyData(){
				const that = this
				//获取我的余额
				await uni.request({
					url: '/wanlshop/pay/getBalance',
					method: 'POST',
					success: res => {
						
						that.limit = res.data;
					}
				});
				//获取我的收益
				await uni.request({
					url: '/amount/amount/revenue',
					method: 'POST',
					data:{
						id:that.user.id
					},
					success: res => {
						that.income = res.data.revenue;
					}
				});
			},
			//获取我的再投资金总额
			async myallReinvestment(){
				await uni.request({
					url: '/income/income/all_reinvestmen',
					method: 'POST',
					data:{
						user_id:this.user.id
					},
					success: res => {
						this.fund = res.data;
					}
				});
			},
			//获取商品投流费用与预计收益
			async getShopData() {
				await uni.request({
					url: '/wanlshop/product/lists',
					data: {
						page: this.current_page,
						filter:JSON.stringify({
							investment_cost:0
						}), //筛选字段
						op:JSON.stringify({
							investment_cost:'>'
						}) //筛选条件
					},
					success: res => {
						if (this.current_page === 1) {
							this.data = res.data.data;
						} else {
							this.data = this.data.concat(res.data.data);
						}
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						// 判断是否还有更多数据
						if (this.current_page < this.last_page) {
							this.status = 'more'; // 没有更多数据
						} else {
							this.status = 'noMore'; // 还有更多数据
						}
				
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.assistance-box {
		display: flex;
		justify-content: center;

		.accistance-content {
			width: 95%;

			.top-picture {
				margin-top: 200rpx;
				position: relative;
				display: flex;
				justify-content: center;

				image {
					width: 100%;
				}

				.picture-b {
					position: absolute;
					top: 90rpx;
					width: 202rpx;
					height: 38rpx;
					background: #FDA01C;
					box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(255, 238, 214, 0.52);
					border-radius: 26rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 36rpx;
				}
			}

			.total-limit {
				margin-top: 18rpx;
				background-image: url('https://cdn.enjoysix.com/uploads/20231021/total-limit.png');
				display: flex;
				flex-direction: column;
				padding: 36rpx 36rpx 38rpx;

				.limit-top {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 14rpx;

					image {
						width: 24rpx;
					}

					.all-money {
						margin-left: 4rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #B1B1B1;
						line-height: 34rpx;
					}
				}

				.limit-middle {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.money-number {
						font-size: 54rpx;
						font-weight: bold;
						color: #1C1C1C;
						line-height: 62rpx;
						width: 80%;
					}

					.limit-middle-but {
						width: 120rpx;
						height: 46rpx;
						background: #EC662F;
						border-radius: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 46rpx;
					}
				}

				.limit-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.income {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						width: 50%;

						.income-left {
							display: flex;
							flex-direction: column;

							.income-text {
								font-size: 24rpx;
								font-weight: 400;
								color: #B1B1B1;
								line-height: 34rpx;
								margin-bottom: 14rpx;
							}

							.income-money {
								font-size: 32rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #1C1C1C;
								line-height: 38rpx;
							}
						}
					}

					.line {
						width: 2rpx;
						height: 73rpx;
						opacity: 0.2;
						border: 2rpx solid #F1ABA0;
						background-color: #F1ABA0;
						margin: 0 36rpx;
					}
				}
			}

			.type {
				margin-top: 18rpx;
				width: 708rpx;
				height: 206rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;

				.type-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;

					.type-text {
						margin-top: 18rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1C1C1C;
						line-height: 40rpx;
					}
				}
			}

			.selection {
				margin-top: 22rpx;
				padding: 36rpx 36rpx 0 36rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				min-height: 600rpx;

				.selection-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.left {
						.pin {
							margin-right: 104rpx;
						}
					}
				}

				.selection-list {
					padding: 36rpx 0 24rpx 0;
					border-bottom: 2rpx solid #F1F1F1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;

						.inflow {
							margin-left: 52rpx;
							height: 32rpx;
							font-size: 28rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #1C1C1C;
							line-height: 32rpx;
						}
					}

					.money {

						height: 32rpx;
						font-size: 28rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #E25740;
						line-height: 32rpx;
					}
				}
			}
		}

	}

	.text {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B1B1B1;
		line-height: 34rpx;
	}

	/* 遮罩层 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 1;
		cursor: pointer;
	}


	.preview-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}

	.preview-content {
		width: 654rpx;
		height: 592rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		// text-align: center;
		// position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 36rpx 0;
	}

	.title {
		margin-top: 54rpx;
		margin-bottom: 40rpx;

		.chong {
			margin: 0 18rpx 0;
			font-size: 32rpx;
			font-weight: 400;
			color: #1C1C1C;
			line-height: 44rpx;
		}

	}

	.money-text {
		width: 100%;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #676767;
		line-height: 40rpx;
		margin-bottom: 18rpx;
	}

	.big-box {
		width: 100%;

		.box-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 18rpx;

			.money {
				width: 182rpx;
				height: 100rpx;
				background: #F8F9FD;
				border-radius: 22rpx;
				border: 2rpx solid #DADBE1;
				display: flex;
				justify-content: center;
				align-items: center;

				.money-text-pupop {
					.money-big {
						height: 50rpx;
						font-size: 42rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #1C1C1C;
						line-height: 50rpx;
					}

					.money-small {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1C1C1C;
						line-height: 34rpx;
					}
				}

			}
		}

		.box-middle {
			height: 100rpx;
			background: #F8F9FD;
			border-radius: 8rpx;
			border: 2rpx solid #DADBE1;
			margin-bottom: 36rpx;
		}
	}

	.box-bottom {
		width: 100%;

		.determine {
			height: 88rpx;
			background: #E25740;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.money-select {
		height: 32rpx;
		font-size: 28rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 32rpx;
		background-image: url('https://cdn.enjoysix.com/uploads/20231021/moenyxuanzhong.png') !important;
	}

	.money-color {
		color: #FFFFFF !important;
	}

	.invite {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		//display: flex;
		//justify-content: center;
		//align-items: center;
    background-color: rgba(0,0,0,0.7);
	}
  .canvas{
    position: absolute;
    top: 20vh;
    left: 10vw;
    //left: 55%;
    //transform: translateX(-50%);
    width: 80vw;
    //height: 80vh;
    height: 65vh;
    //display: flex;
    //align-items: center;
    //justify-content: center;
  }
  .shareButton{
    position: absolute;
    top: 55vh;
    left: 10vw;
    width: 60vw;
    height: 11.73vw;
    background: #FFFFFF;
    box-shadow: 0 0 1.6vw 0 rgba(226,87,64,0.21);
    border-radius: 5.87vw;

    font-size: 4.27vw;
    font-weight: 400;
    color: #E25740;
    line-height: 11.73vw;
    text-align: center;
  }
  .shareClose{
    position: absolute;
    //left: 85vw;
    right: 3vw;
    top: 3vw;
    //width: 2.4vw;
    //height: 2.4vw;
    //background-image: url("https://cdn.enjoysix.com/uploads/20231021/guanbi.png");
    //background-size: 100%;
    z-index: 9;
  }
</style>